<template>
	<view>
		<!-- 顶部的搜索框 -->
		<key-word-search placeholder="输入任意关键字搜索" @change="searchChange"></key-word-search>
		<!-- 高级搜索 -->
		<view class="big-search-box"><text class="big-text">高级搜索</text></view>
		<!-- 有多少个律师、律所等的提示信息 -->
		<view class="big-search-box" style="background-color: #F5F5F5;">
			共搜索到
			<text class="big-text">{{tipNumber}}</text>
			个{{ thisKey }},数据持续更新中...
		</view>
		<!-- 数据项区域 -->
		<!-- id 为 1 则渲染律师的数据 -->
		<block v-if="isLawyer">
			<view class="search-item" v-for="seachItem in lawyerDataList" :key="seachItem.id" @click="searchItmeClick(seachItem.id)">
				<!-- 名称 -->
				<view class="name-box">
					<text class="name">{{ seachItem.user_name }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 所属区域及案例 -->
				<view class="name-box">
					<text>{{ seachItem.user_court }}</text>
					<text>（案例 {{ seachItem.case }} 条）</text>
				</view>
			</view>
		</block>
		<!-- id 不为 1 则渲染法官的数据 -->
		<block v-else>
			<view class="search-item" v-for="seachItem in judgeDataList" :key="seachItem.id" @click="searchItmeClick(seachItem.id)">
				<!-- 名称 -->
				<view class="name-box">
					<text class="name">{{ seachItem.user_name }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 所属区域及案例 -->
				<view class="name-box">
					<text>{{ seachItem.user_court }}</text>
					<text>（案例 {{ seachItem.case }} 条）</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 此值为 true 则渲染律师数据，为 false 则渲染 法官数据
			isLawyer: true,
			// 此值由来源页动态传递，要么为 律所 要么为 法院 
			thisKey: '',
			// 提示信息中的数量
			tipNumber: 0,
			// 模拟的律师的数据列表
			lawyerDataList: [
				{
					id: 1,
					user_name: '冯静',
					user_court: '昆明铁路运输中级法院',
					case: 5
				},
				{
					id: 2,
					user_name: '陈岛民',
					user_court: '昆明铁路运输中级法院',
					case: 6
				},
				{
					id: 3,
					user_name: '吴明奇',
					user_court: '昆明铁路运输中级法院',
					case: 3
				},
				{
					id: 4,
					user_name: '张伟',
					user_court: '昆明铁路运输中级法院',
					case: 1
				}
			],
			// 模拟的法官的数据列表
			judgeDataList: [
				{
					id: 1,
					user_name: '冯静',
					user_court: '上海市浦东新区人民法院',
					case: 5
				},
				{
					id: 2,
					user_name: '陈岛民',
					user_court: '上海市浦东新区人民法院',
					case: 6
				},
				{
					id: 3,
					user_name: '吴明奇',
					user_court: '昆明铁路运输中级法院',
					case: 3
				},
				{
					id: 4,
					user_name: '张伟',
					user_court: '昆明铁路运输中级法院',
					case: 1
				},{
					id: 5,
					user_name: '赵刚',
					user_court: '太原市玄武区初级人民法院',
					case: 1
				}
			],
		};
	},
	onLoad(options) {
		// 判断来源页是搜律师页还是搜法院页
		if(options.title === '律所') {
			this.thisKey = '律师'
			this.tipNumber = this.lawyerDataList.length		// 遍历律师数据列表得到律师总数
		} else {
			this.isLawyer = false
			this.thisKey = '法官'
			this.tipNumber = this.judgeDataList.length		// 遍历法官数据列表得到法官总数
		}
		// 根据用户传递的参数动态设置页面标题
		uni.setNavigationBarTitle({
			title: options.title + '详情'
		});
	},
	methods: {
		// 监听搜索框的内容发生变化事件
		searchChange(keyWord) {
			console.log(keyWord);
		},
		// 监听数据项的点击事件
		searchItmeClick(id) {
			console.log(id)
			this.$u.route({
				url: '/myPackageA/pages/views/search-item-detail',
				params: {
					title: this.thisKey,
					id: id
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.big-search-box {
		line-height: 82rpx;
		text-align: center;
		color: #999999;
		.big-text {
			font-size: 28rpx;
			color: $u-text-color;
		}
	}
	.search-item {
		width: 100%;
		height: 142rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 26rpx 26rpx;
		box-shadow: 0px 1px 0px 0px #e7eaf0;
		.name-box {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999999;
			.name {
				font-size: 30rpx;
				color: #141418;
			}
		}
	}
</style>
